<template>
  <!-- 新增/删除 -->
  <!-- 事件:createRow deleteRows -->
  <div class="btn-list">
    <el-button size="small" type="primary" :icon="Plus" @click="createTagVisible = true">新增标签</el-button>
  </div>
  <!-- 显示数据表 -->
  <!-- 变量:UserInfos  事件:handleSelectionChange updateRow deleteRow -->
  <!-- height="250" 固定头  -->
  <!-- :fixed="index == 0" 固定首列 -->
  <!-- <el-table-column show-overflow-tooltip 单行显示,超出会提示 -->
  <div class="table-box">
    <el-table align="left" style="width: 100%" tooltip-effect="dark" :data="useTag.tags" row-key="tag_id">
      <el-table-column fixed align="left" label="ID" width="120" prop="tag_id" />
      <el-table-column fixed align="left" label="名称" width="120" prop="name" />
      <el-table-column fixed align="left" label="数量" width="120" prop="count" />

      <el-table-column align="left" label="按钮组">
        <template #default="scope">
          <el-button type="text" :icon="Search" size="small" class="table-button" @click="showUsers(scope.row)">查看</el-button>
          <el-button type="text" :icon="Edit" size="small" @click="changeName(scope.row)">改名</el-button>
          <!-- 有用户的不能删除 -->
          <el-button :disabled="scope.row.count > 0" type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 显示选择的用户, 有nickname的显示昵称, 无昵称显示 openid -->
  <div class="updateForm">
    <el-dialog v-model="dialogVisible" draggable :title="selectedTag.name">
      <div align="left">
        <el-tag :closable="false" v-for="item in usersOfTag">
          <div v-if="item.nickname">{{ item.nickname }}</div>
          <div v-else>{{ item.openid }}</div>
        </el-tag>
      </div>
    </el-dialog>
  </div>
  <!-- 标签改名 form -->
  <div class="updateForm">
    <el-dialog v-model="updateTagVisible" draggable title="更新标签">
      <el-form :inline="true" :model="selectedTag">
        <el-form-item label="ID">
          <el-input v-model="selectedTag.tag_id" :readonly="true" size="default" />
        </el-form-item>
        <el-form-item label="标签">
          <el-input style="width: 120px;" v-model="selectedTag.name" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="onCancel">取 消</el-button>
          <el-button size="small" type="primary" @click="onConfirm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- 创建标签 form  -->
  <div class="updateForm">
    <el-dialog v-model="createTagVisible" draggable title="创建标签">
      <el-form :inline="true">
        <el-form-item label="标签">
          <el-input style="width: 120px;" v-model="selectedTag.name" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="onCancel">取 消</el-button>
          <el-button size="small" type="primary" @click="onConfirm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Search, Edit, Plus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { ITag, IUserInfo, getUsersByTag, updateTag, createTag, deleteTag } from './api'
import { useTagStore } from './store'

const useTag = useTagStore()
// 查询数据
const getData = async () => {
  await useTag.getAllTags()
}
getData() // 页面加载时查询

// 查看用户
const dialogVisible = ref(false)
const selectedTag = ref({} as ITag)
const usersOfTag = ref<IUserInfo[]>([])
const showUsers = async (row: ITag) => {
  await getUsersByTag(String(row.tag_id)).then(resp => {
    usersOfTag.value.length = 0
    usersOfTag.value.push(...resp.data.data)
    selectedTag.value = row
    dialogVisible.value = true
  })
}

// 新建标签
const createTagVisible = ref(false)

// 删除标签
const deleteRow = (row: ITag) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await deleteTag(row.tag_id).then(resp => {
      useTag.tags = useTag.tags.filter(item => item !== row)
    })
  })
}

// 标签改名
const updateTagVisible = ref(false)
const changeName = (row: ITag) => {
  // 复制, 不直接改原始数据
  Object.assign(selectedTag.value, row)
  updateTagVisible.value = true
}

const onCancel = () => {
  updateTagVisible.value = false
  createTagVisible.value = false
}
const onConfirm = async () => {
  if (createTagVisible.value) {
    await createTag(selectedTag.value.name).then(resp => {
      getData() // 数据刷新
      createTagVisible.value = false
    })
  } else {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      await updateTag(selectedTag.value).then(resp => {
        getData() // 数据刷新
        updateTagVisible.value = false
      })
    })
  }
}
</script>

<style scoped></style>
